<template>
	<view class="AgreementPage">
		<view class="payment">
			请选择一种账期
		</view>
		<radio-group @change="radioChange">
			<label class="radioLine" v-for="(item, index) in range" :key="item.value">
				<view>
					<radio :value="item.value" :checked="item.value == current" />
				</view>
				<view>{{item.text}}</view>
			</label>
		</radio-group>
		<view style="margin-top: 10px;color: #888;">
			可用余额: ￥{{momenyFormat(Usedamount)}}
		</view>
		<!-- <uni-data-select style="width: 80%;margin-left: 10%;" v-model="value" :localdata="range"></uni-data-select> -->
		<checkbox-group @change="changeAgree" style="line-height: 4;text-align: center;margin-bottom: 20px;">
			<label>
				<checkbox :checked="agree" style="transform:scale(0.7)" value="a" />
			</label>
			我已阅读并同意<text @click="toWebView('https://www.yoojet.com/SheHuo_.html')" style="color: #b051ff">《赊货协议》</text>
		</checkbox-group>
		<view class="bank">
			<view class="" style="width: 100%;">
				本次交易由{{BankName}}提供
			</view>
			<view class="">
				{{entity.Phone}}
			</view>
		</view>
		<button v-if="Usedamount==0" disabled="" @click="toGoodsPage" type="default"
			style="position: fixed;bottom: 80px;left:10%;width: 80%;">可用余额不足</button>
		<button v-else @click="toGoodsPage" type="primary"
			style="position: fixed;bottom: 80px;left:10%;width: 80%;">去赊货</button>
	</view>
</template>

<script>
	import {
		momenyFormat
	} from '@/utils/utils.js'
	import {
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				momenyFormat,
				value: 0,
				range: [],
				agree: false,
				current: "",
				entity: {},
				// 可用额度
				Usedamount: 0,
				Totalamount: 0,
				// 银行名称
				BankName: "",
				userInfo: {},
				typeIndex: 0
			}
		},
		onLoad(options) {
			this.userInfo = uni.getStorageSync('userInfo')
			this.entity = JSON.parse(options.obj)
			// 默认选择第一个选项
			this.current = this.entity.AccountingperiodDays
			let newRange = [{
					value: this.entity.AccountingperiodDays + '',
					text: this.entity.AccountingperiodDays + ' 天 '
				},
				{
					value: this.entity.Accountingperiod2Days + '',
					text: this.entity.Accountingperiod2Days + ' 天 '
				},
				{
					value: this.entity.Accountingperiod3Days + '',
					text: this.entity.Accountingperiod3Days + ' 天 '
				}
			]
			this.range = newRange
			console.log('获取过来的参数', JSON.parse(options.obj), this.entity)
			this.GetQuota()
		},
		onShow() {

		},
		methods: {
			...mapMutations(['clearCarList']),
			// 获取可用额度数据
			GetQuota() {
				this.$http('post', '/Base/Base_Quota/GetQuota?CreatorId=' + this.userInfo.Id + '&Compayid=' + this.entity
					.Id +
					'&CompanyName=' + this.entity.Title + '&BankId=' + this.entity.BankId).then(res => {
					if (res.Success) {
						console.log('获取可用额度数据', res)
						this.Totalamount = res.Data.Totalamount
						this.Usedamount = res.Data.Totalamount - res.Data.Usedamount
						this.BankName = this.entity.BankName
					} else this.$api.msg(res.Msg)
				})
			},
			radioChange(evt) {
				let newIndex = 0
				let index = this.range.forEach((item, index) => {
					console.log('循环', item.value, evt.detail.value)
					if (item.value === evt.detail.value) {
						newIndex = index
					}
				})
				this.typeIndex = newIndex
				this.current = evt.detail.value
				console.log('选中的是', evt.detail.value, newIndex)

			},
			toGoodsPage() {
				let current = this.current
				console.log('选择的是', this.current)
				if (!this.agree) return this.$api.msg('请阅读并同意《赊货协议》')
				this.clearCarList()
				uni.redirectTo({
					url: '/pages/GoodsPage/GoodsPage?current=' + this.current + '&Id=' + this.entity.Id +
						'&Title=' +
						this.entity.Title + '&BankId=' + this.entity.BankId + '&typeIndex=' + this.typeIndex
				})
			},
			// 赊货协议跳转
			toWebView(url) {
				uni.navigateTo({
					url: '/pages/webView/webView?url=' + url + '&title=赊货协议'
				})
			},
			changeAgree(e) {
				if (e.detail.value.length > 0) this.agree = true
				else this.agree = false
			}
		}
	}
</script>

<style scoped lang="scss">
	.AgreementPage {
		padding: 10px 20px;
		padding-top: 50px;
		line-height: 2;
		height: 100%;
		width: 100%;
		// background-image: url(/static/home/background.png);
		// background-size: cover;
		box-sizing: border-box;

		.payment {
			color: #555;
			font-size: 18px;
			font-weight: bold;
			text-align: center;
			margin-bottom: 10px;
		}

		.bank {
			text-align: center;
			width: 100%;
			color: #999;
			font-size: 15px;
		}

		.radioLine {
			display: flex;
			padding: 10px;
			background: #fff;
			border-bottom: 1px solid #ccc;
		}
	}
</style>